package com.echo.yixiaowu.main

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.echo.yixiaowu.R
import com.echo.yixiaowu.feature.main.home.DraggableItem
import com.echo.yixiaowu.feature.main.home.SortState
import com.echo.yixiaowu.ui.theme.HeaderTitleColor
import kotlinx.coroutines.launch

@Composable
fun Header(
    modifier: Modifier,
    mCurrentFirstMenuHeight: Dp,
    mCurrentFirstMenuAlpha: Float,
    onClickMenu: () -> Unit,
    onClickHeader: (Int) -> Unit,
    pagerState: PagerState,
    sortState: SortState
) {
    val headerLazyRowState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val interactionSource = remember { MutableInteractionSource() }
    LaunchedEffect(sortState.selectedItemId) {
        sortState.selectedItemId.let { selectedId ->
            // 找到选中项的索引
            val selectedIndex = sortState.items.indexOfFirst { it.id == selectedId }
            if (selectedIndex != -1) {
                // 动画滚动到该索引
                scope.launch {
                    headerLazyRowState.animateScrollToItem(selectedIndex)
                }
            }
        }
    }

    Box(
        modifier = modifier
            .height(mCurrentFirstMenuHeight)
            .graphicsLayer(alpha = mCurrentFirstMenuAlpha)
    ) {
        Row(
            modifier = Modifier.fillMaxSize(),
            verticalAlignment = Alignment.CenterVertically // 垂直居中对齐 Row 里的所有内容
        ) {
            // 固定Icon
            Icon(
                modifier = Modifier
                    .padding(start = 12.dp)
                    .clickable(
                        onClick = onClickMenu,
                        indication = null,
                        interactionSource = interactionSource
                    )
                    .size(30.dp),
                painter = painterResource(R.drawable.ic_left_detail),
                contentDescription = "details",
                tint = Color.White
            )

            LazyRow(
                // weight(1f) 让 LazyRow 填充 Row 中剩余的所有宽度
                state = headerLazyRowState,
                modifier = Modifier.weight(1f)
            ) {
                itemsIndexed(sortState.items, key = { _, item -> item.id }) { _, item ->
                    SortTabItem(
                        modifier = Modifier.animateItem(),
                        item = item,
                        isSelected = sortState.selectedItemId == item.id,
                        onClick = {
                            onClickHeader(item.id)
                            scope.launch {
                                val selectedPageIndex =
                                    sortState.items.indexOfFirst { it.id == item.id }
                                if (selectedPageIndex != -1) {
                                    pagerState.animateScrollToPage(selectedPageIndex)
                                }
                            }
                        }
                    )
                }
            }
        }
    }
}

@Composable
fun SortTabItem(
    modifier: Modifier,
    item: DraggableItem,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val textColor by animateColorAsState(
        targetValue = if (isSelected) MaterialTheme.colorScheme.onPrimary else HeaderTitleColor,
        animationSpec = tween(durationMillis = 300),
        label = "backgroundAnimation"
    )
    val fontWeight = if (isSelected) FontWeight.Black else FontWeight.Bold
    Box(
        modifier = modifier
            .clip(RoundedCornerShape(16.dp))
            .clickable(
                onClick = onClick,
                interactionSource = interactionSource,
                indication = null
            )
            .padding(horizontal = 12.dp, vertical = 8.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = item.title,
            fontSize = 24.sp,
            fontWeight = fontWeight,
            color = textColor,
        )
    }
}